<div id="tab-query">
	<div>
		<div class="row-fluid">
			<div class="span12" style="border: 1px solid gray;">
				<textarea id="queryText" title="value"></textarea>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span2">
				<button onclick="javascript:executeQuery()" class="btn btn-primary btn-large">
					Execute <img border="0" alt="Execute" src="images/execute.png" align="top" />
				</button>
			</div>
			<div class="span5">
				History: <select style="width: 400px;" id="savedQueries"></select>
			</div>
			<div class="span2">
				Limit: <input id="limit" class="input-mini" size="1" value="20" />
			</div>
			<div class="span2">
				Language: <select id="language" class="input-small"><option label="SQL" value="sql">SQL</option>
					<option label="GREMLIN" value="gremlin">GREMLIN</option>
				</select>
			</div>
			<div class="span1">
				<a href="http://code.google.com/p/orient/wiki/SQLQuery" target="help">SQL syntax</a>
			</div>
		</div>
		<div>
			<div id="tabs-results" class="noborder">
				<ul>
					<li><a href="#tab-table"><span>Table</span> </a></li>
					<li><a href="#tab-output"><span>Output</span> </a></li>
				</ul>
				<div id="tab-table" class="noborder">
					<div class="row">
						<div class="offset8 span4 btn-group">
							<button id="deleteRecord" class="btn" style="width: 90px; text-align: center">
								Delete <img border="0" alt="Delete record" src="images/delete.png" align="top" />
							</button>
							<button id="editRecord" class="btn" style="width: 90px; text-align: center">
								Edit <img border="0" alt="Edit record" src="images/set.png" align="top" />
							</button>
							<button id="graphRecord" class="btn" style="width: 90px; text-align: center">
								Graph <img border="0" alt="Graph record" src="images/graph.png" align="top" />
							</button>
						</div>
					</div>
					<div class="row">
						<div class="span12">
							<table id="queryResultTable" style="width: 100%;">
							</table>
							<div id="queryResultTableNav"></div>
						</div>
					</div>
				</div>
				<div id="tab-output" class="noborder">
					<textarea id="commandOutput" cols="110" rows="15" title="value" readonly="readonly">
                                                           </textarea>
				</div>
			</div>
		</div>
	</div>
</div>
</div>

<script>
	var commandResponse;

	$("#queryText").val(($.trim($("#queryText").val())));

	$("#editRecord").click(
			function() {
				var selectedRow = $("#queryResultTable").jqGrid('getGridParam',
						'selrow');
				if (selectedRow != null)
					displayDocument(commandResponse.result[selectedRow - 1],
							orientServer);
			});
	$("#graphRecord").click(
			function() {
				var selectedRow = $("#queryResultTable").jqGrid('getGridParam',
						'selrow');
				if (selectedRow != null)
					displayGraph(commandResponse.result[selectedRow - 1]);
			});

	function queryResponse(data) {
		displayResultSet(data["result"]);
	}

	function executeQuery(code) {
		startTimer();

		if (code)
			queryEditor.setCode(code);
		else
			code = queryEditor.getCode();

		var formattedCode = $.trim(code);
		if (formattedCode != code) {
			code = formattedCode;
			queryEditor.setCode(code);
		}

		var limit = $('#limit').val();

		orientServer.setEvalResponse(false);
		var commandResult = orientServer.executeCommand(code, $('#language')
				.val(), limit);
		orientServer.setEvalResponse(true);

		if (commandResult && commandResult.charAt(0) == '{') {
			commandResponse = orientServer.transformResponse(commandResult);
			$('#tabs-results').tabs('select', 0);
		} else {
			commandResponse = commandResult;
			$('#tabs-results').tabs('select', 1);
		}

		controller.parameter('queryResponse', commandResponse);
		controller.parameter('commandResponse', commandResult);

		controller.parameter('queryLimit', limit);

		var savedQueries = controller.parameter('savedQueries');
		if (savedQueries == null) {
			savedQueries = [];
			controller.parameter('savedQueries', savedQueries);
		}

		var pos = $.inArray(code, savedQueries);
		if (pos > -1)
			savedQueries.splice(pos, 1);

		savedQueries.unshift(code);
		refreshSavedQueries();

		if (commandResult == null) {
			$("#output").text(orientServer.getErrorMessage());
			commandOutputEditor.setCode('');
		} else {
			queryResponse(commandResponse);
			commandOutputEditor.setCode(commandResult);
		}
	}

	function refreshSavedQueries() {
		var savedQueries = controller.parameter('savedQueries');
		var options = '';
		for (q in savedQueries) {
			options += '<option value="' + savedQueries[q] + '">'
					+ savedQueries[q] + '</option>';
		}
		$("#savedQueries").html(options);
		$("#savedQueries").attr('selectedIndex', 1);
		return $("#savedQueries").val();
	}

	function clearResultset() {
		$("#queryResultTable").jqGrid('clearGridData');
	}

	$("#savedQueries").change(function() {
		queryEditor.setCode($(this).val());
	});

	var currentQuery = $.trim($("#queryText").val());

	var lastQuery = refreshSavedQueries();
	if (currentQuery.length == 0 && lastQuery)
		$("#queryText").val(lastQuery);

	previous = controller.parameter('queryResponse');
	if (previous != null)
		queryResponse(previous);

	previous = controller.parameter('commandResponse');
	if (previous != null)
		$('#commandOutput').val(previous);

	previous = controller.parameter('queryLimit');
	if (previous != null)
		$("#limit").val(previous);

	queryEditor = CodeMirror.fromTextArea('queryText', {
		width : "auto",
		height : "60px",
		parserfile : "parsesql.js",
		stylesheet : "styles/codemirror/sqlcolors.css",
		path : "js/codemirror/",
		textWrapping : false,
		onLoad : controller.parameter('queryLoad')
	});

	commandOutputEditor = CodeMirror.fromTextArea('commandOutput', {
		width : "auto",
		height : "300px",
		parserfile : [ "tokenizejavascript.js", "parsejavascript.js" ],
		stylesheet : "styles/codemirror/jscolors.css",
		path : "js/codemirror/",
		textWrapping : true,
		json : true
	});

	$('#tabs-results').tabs();
	$('#tabs-results').tabs('select', 0);
</script>